<template>
	<section class="wrapper">
		<div style="padding: 20px;">
			<div class="top_div">
				<i @click="$router.back()" class="iconfont icon24px icon-circle-left"></i>
				<h2>{{$t('title_text.Material_Center_title')}}</h2>
			</div>
			<div class="input_box flex_between_center">
				<input type="text" placeholder="搜索视频" v-model="state.search_keyword" />
				<button class="original_btn" @click="search_content">搜索</button>
			</div>
			<div class="search_terms_and_btn flex_between_center">
				<div>
					<span style="margin-right: 20px;" v-for="(item,index) in state.Recently_search_list"
						:key="index">{{item}}</span>
				</div>
				<div><button class="original_btn" @click="state.upload_video_dialogVisible=true;state.add_or_edit_video_flag=true">上传视频</button><button
						class="original_btn">删除</button></div>
			</div>
			<div class="filter_box">
				<div class="carousel-container">
					<!-- 左侧箭头（向右滚动） -->
					<button class="scroll-arrow left-arrow" @click="scrollRight"
						:class="{ 'arrow-disabled': isAtStart }">
						<i class="iconfont icon28px icon-circle-left" style="color: #666;"></i>
					</button>
					<!-- 左侧固定内容区（在左箭头后面） -->
					<div class="fixed-content left-content">
						<slot name="left-content">
							<p><el-icon size="30">
									<Menu />
								</el-icon></p>
							<p>全部</p>
						</slot>
					</div>
					<!-- 轮播内容区域（中间） -->
					<div class="carousel-wrapper">
						<div class="carousel-items" :style="{ transform: `translateX(-${scrollPosition}px)` }">
							<div v-for="item in state.classifys_list" :key="item.id" class="carousel-item">
								<div class="carousel-card">
									<p><i class="iconfont icon30px" :class="item.img"></i></p>
									<h3 class="item-title">{{ item.category }}</h3>
								</div>
							</div>
						</div>
					</div>
					<!-- 右侧固定内容区（在右箭头前面） -->
					<div class="fixed-content right-content" @click="state.classifys_dialogVisible = true">
						<slot name="right-content">
							<p><el-icon size="30">
									<Edit />
								</el-icon></p>
							<p>分类设置</p>
						</slot>
					</div>
					<!-- 右侧箭头（向左滚动） -->
					<button class="scroll-arrow right-arrow" @click="scrollLeft" :class="{ 'arrow-disabled': isAtEnd }">
						<i class="iconfont icon30px icon-circle-right" style="color: #666;"></i>
					</button>
				</div>
				<el-popover class="box-item" trigger="click" placement="bottom-end" width="400">
					<template #reference>
						<div>
							<el-icon size="30">
								<Fold />
							</el-icon>
							<span>筛选</span>
							<el-icon size="30">
								<ArrowDown />
							</el-icon>
						</div>
					</template>
					<template #default>
						<div class="filter-upload-time-box">
							<p>上传时间</p>
							<div>
								<span v-for="item in state.filter_upload_time_list">{{item.text}}</span>
							</div>
							<el-date-picker v-model="value1" type="daterange" range-separator="To"
								start-placeholder="开始时间" end-placeholder="结束时间" />
						</div>
					</template>
				</el-popover>
			</div>
			<div style="display: flex;align-items: center;">
				<el-checkbox size="large" :model-value="videos_checked" />&nbsp;全选
			</div>
			<div class="video_list">
				<div v-for="(item,index) in state.videos_list" :key="index">
					<div class="video_box" @click.stop="close_video">
						<div class="flex_between_center" style="margin: 6px 6px 0 6px;">
							<div class="video_checked flex_center_center" :class="item.checked?'video_checked_bgc':''"
								@click.stop="item.checked=!item.checked">
								<span>✔</span>
							</div>
							<el-popover class="box-item" placement="bottom-end" popper-style="padding:0;min-width:0px;"
								width="70">
								<template #reference>
									<div style="transform: rotate(90deg)">
										<el-icon size="20">
											<MoreFilled />
										</el-icon>
									</div>
								</template>
								<div class="fun_options">
									<p @click="edit_video_info">编辑</p>
									<p>删除</p>
								</div>
							</el-popover>
						</div>
						<video width="100%" height="100%" autoplay id="myVideo" controls>
							<!-- <source src="http://vod.v.jstv.com/2025/09/01/JSTV_JSGGNEW_1756730917831_1c7SAd4_1823.mp4"
								type="video/mp4"> -->
						</video>
					</div>
					<p>{{item.name}}</p>
				</div>
			</div>
		</div>
		<!-- 分类设置 -->
		<el-dialog v-model="state.classifys_dialogVisible" title="分类设置" width="500" style="height: 400px;"
			:show-close="false">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header flex_between_center">
					<h4 style="margin: 10px 0px;" :id="titleId" :class="titleClass">分类设置</h4>
					<div class="classifys_right_close" @click="state.classifys_dialogVisible = false"><el-icon size="30"
							color="#dfdfdf">
							<CircleClose />
						</el-icon></div>
				</div>
				<div>
					<div class="classifys_list_title">
						<label style="width:80px;">分类名称</label>
						<el-input v-model="state.add_classify_name" placeholder="请输入分类名称" clearable
							style="width: 240px;margin-left: 10px;" />
						<el-select v-model="state.classify_icon_value" placeholder="添加分类图标"
							style="width:160px;margin-left: 10px;">
							<el-option v-for="item in state.classify_iconfonts" :key="item.icon_value"
								:label="item.label" :value="item.icon_value">
								<div class="flex items-center">
									<i class="iconfont icon18px" :class="item.icon_value"
										style="margin-right: 10px;"></i>
									<span>{{ item.label }}</span>
								</div>
							</el-option>
							<template #label>
								<i class="iconfont icon18px" :class="state.classify_icon_value"
									style="color: #666;margin-right: 10px;"></i>
							</template>
						</el-select>
						<i @click="add_classifys_list" class="iconfont icon24px icon-dui"
							style="color: #1296db;margin-left: 10px;text-shadow: 0 0 6px #1296db;"></i>
					</div>
					<div class="classifys_list_box">
						<div v-for="item in state.classifys_list" :key="item.id">
							<p><i class="iconfont icon18px" :class="item.img"
									style="color: #666;margin-right: 10px;"></i>{{item.category}}</p>
							<i @click="$router.back()" class="iconfont icon24px icon-cuo"
								style="color: #ea1212;cursor: pointer;"></i>
						</div>
					</div>
				</div>
			</template>
		</el-dialog>
		<!-- 上传视频弹窗 -->
		<el-dialog v-model="state.upload_video_dialogVisible" width="800" :show-close="false">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header flex_between_center">
					<h4 style="margin: 10px 0px;" :id="titleId" :class="titleClass">{{state.add_or_edit_video_flag?'上传我的视频':'编辑我的视频'}}</h4>
					<div class="upload_video_right_close" @click="state.upload_video_dialogVisible = false"><el-icon
							size="30" color="#fff">
							<CircleClose />
						</el-icon></div>
				</div>
			</template>
			<el-upload v-if="state.add_or_edit_video_flag" class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
				multiple>
				<div>
					<el-button icon="Picture">云盘上传</el-button>
					<el-button icon="FolderOpened">本地上传</el-button>
				</div>
			</el-upload>
			<H5 :style="{margin: state.add_or_edit_video_flag?'10px 0':'0 0 10px 0'}">视频标题<span style="color: red;">*</span></H5>
			<div class="Upload_video_dialog_inputbox">
				<el-input size="large" v-model="state.video_input_title" maxlength="30" show-word-limit type="text" />
			</div>
			<H5>视频标签</H5>
			<div class="Upload_video_dialog_inputbox">
				<el-select size="large" v-model="state.video_select_tag" placeholder="选择你的视频类型,比如CG幻想、手绘风等" clearable
					multiple>
					<template #label="{ label, value }"><span>{{ value }}</span></template>
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<H5>描述信息</H5>
			<div class="Upload_video_dialog_inputbox">
				<el-input v-model="state.video_input_describe" maxlength="500" :autosize="{ minRows: 6, maxRows: 6 }"
					placeholder="可描述你的视频的概念含义、制作过程、视频提示词等,和网友学习交流" show-word-limit type="textarea" />
			</div>
			<template #footer>
				<div class="upload-video-dialog-footer">
					<el-button type="primary" size="large"
						@click="state.upload_video_dialogVisible = false">发布</el-button>
				</div>
			</template>
		</el-dialog>
	</section>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onUnmounted,
		getCurrentInstance,
		watch,
	} from 'vue';
	import request from '@/utils'
	import {
		ElMessage,
		ElMessageBox,
		ElLoading,
		ElIcon
	} from 'element-plus';
	import {
		useStore
	} from 'vuex';
	// 导入分类图标配置
	import classifyIconfonts from './js/classifyIconfonts';
	const store = useStore();
	const state = reactive({
		search_keyword: '',
		Recently_search_list: JSON.parse(localStorage.getItem("Recently_search_list")) || [],
		upload_video_dialogVisible: false,
		classifys_dialogVisible: false, //素材分类设置弹框开关
		add_classify_name: '', //新增素材分类名称
		videos_checked: false,
		video_input_title: '',
		video_select_tag: '',
		video_input_describe: '',
		add_or_edit_video_flag:false, //是上传视频还是编辑视频信息
		classify_icon_value: 'icon-classify_default', //分类icon图标
		classify_iconfonts:classifyIconfonts,
		videos_list: [{
			name: '啊这'
		}, {
			name: '啊这'
		}, {
			name: '啊这'
		}, {
			name: '啊这'
		}, {
			name: '啊这'
		}, {
			name: '啊这'
		}, {
			name: '啊这'
		}], //视频列表
		filter_upload_time_list: [{
			text: '全部'
		}, {
			text: '1天'
		}, {
			text: '1周'
		}, {
			text: '一个月'
		}, {
			text: '1年'
		}], //视频时间过滤列表
		classifys_list: [], //素材分类列表数组
	})
	onMounted(() => {
		Get_video_list(); //获取视频列表
		Get_classifys_list(); //获取素材分类列表
	});
	//搜索
	const search_content = () => {
		push_recently_search_list()
	}
	//添加到最近搜索词列表
	function push_recently_search_list() {
		if (state.Recently_search_list.length > 5) {
			state.Recently_search_list.splice(0, 1)
		}
		state.Recently_search_list.push(state.search_keyword)
		window.localStorage.setItem('Recently_search_list', JSON.stringify(state.Recently_search_list))
		console.log(state.Recently_search_list)
	}
	// 滚动状态管理
	const scrollPosition = ref(0);
	const scrollStep = ref(1);
	const itemWidth = ref(180); // 内容宽度 + 间距

	// 边界判断
	const isAtStart = computed(() => scrollPosition.value <= 0);
	const isAtEnd = computed(() => {
		const visibleCount = 4;
		const maxScrollItems = state.classifys_list.length - visibleCount;
		const maxScrollPosition = maxScrollItems * itemWidth.value;
		return scrollPosition.value >= maxScrollPosition;
	});

	// 滚动方法
	const scrollLeft = () => {
		const visibleCount = 4;
		const maxScrollItems = state.classifys_list.length - visibleCount;
		const maxPosition = maxScrollItems * itemWidth.value;

		scrollPosition.value = Math.min(
			scrollPosition.value + (scrollStep.value * itemWidth.value),
			maxPosition
		);
	};

	const scrollRight = () => {
		scrollPosition.value = Math.max(
			scrollPosition.value - (scrollStep.value * itemWidth.value),
			0
		);
	};
	//关闭视频
	const close_video = () => {
		var video = document.getElementById("myVideo");
		video.pause();
	};
	//获取视频列表
	const Get_video_list = () => {
		state.videos_list = state.videos_list.map((item, index) => ({
			...item,
			checked: true // 只有当前索引项选中
		}));
	};
	//获取素材分类列表
	const Get_classifys_list = () => {
		const response = request.get(`/video/categories/list`)
		response.then((res) => {
			state.classifys_list = res.data.data
		}).catch(() => {})
	};
	//新增素材分类列表
	const add_classifys_list = () => {
		const response = request.post('/video/categories/create', {
			category: state.add_classify_name,
			img: state.classify_icon_value
		})
		response.then((res) => {
			if (res.data.code == 200) {
				Get_classifys_list()
			}
		}).catch(() => {})
	};
	//编辑视频信息
	const edit_video_info = () => {
		state.upload_video_dialogVisible=true
		state.add_or_edit_video_flag=false
	};
</script>

<style lang="less" scoped>
	@import './css/classifyIconfonts.css';
	h2 {
		margin: 0;
		margin-left: 10px;
	}

	.wrapper {
		background-color: #fff;
		border-radius: 10px;
		text-align: left;
		position: relative;

		.top_div {
			display: flex;
			align-items: center;
			padding-top: 10px;
			padding-bottom: 20px;
			padding-left: 10px;
			border-bottom: 1px solid #ececec;

			i {
				cursor: pointer;
			}
		}

		.input_box input::placeholder {
			color: #ccc;
		}

		.input_box {
			width: 40%;
			height: 50px;
			margin-top: 20px;
			border: 2px solid #587dfd;
			padding: 0 10px;
			box-sizing: border-box;
			border-radius: 10px;
			box-shadow: 8px 6px 8px -4px #a1affd, 0 8px 6px -4px #a1affd;

			input {
				width: 80%;
				height: 80%;
				border: none;

			}

			button {
				width: initial;
				padding: 0 25px !important;
				height: 80% !important;
			}
		}

		.search_terms_and_btn {
			margin: 10px 0;
			padding: 10px 0;
			border-bottom: 1px solid #ececec;
		}
	}

	.original_btn {
		width: 80px;
		margin-left: 20px;
		padding: 6px 0;
		white-space: nowrap;
		border-radius: 8px;
		cursor: pointer;
		background-color: #456efd;
		color: #fff;
		border: none;
	}

	.filter_box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>div:nth-of-type(2) {
			display: flex;
			justify-content: space-between;
			gap: 10px;
			align-items: center;
			border: 1px solid #d0d0d0;
			border-radius: 4px;
			padding: 10px;
			cursor: pointer;
		}
	}

	.video_list {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(5, 19%);
		justify-content: space-between;
		column-gap: 1%;
		row-gap: 1%;

		>div {
			flex: 0 0 19%;
			// margin-right: 1%;
			// margin-bottom: 0.8%;

			p {
				margin-top: 10px;
			}
		}

		.video_box {
			height: 400px;
			border-radius: 6px;
			border: 1px solid #ededed;

			.video_checked {
				width: 20px;
				height: w0px;
				border: 1px solid #dcdfe6;
				border-radius: 100%;
				color: #fff;
			}

			.video_checked_bgc {
				background-color: #70d77a;
			}
		}

		.video_box:hover {
			cursor: pointer;
		}
	}

	.fun_options {
		p {
			margin: 0;
			padding: 10px 15px;
			text-align: center;
		}

		p:hover {
			background-color: rgb(235.9, 245.3, 255);
			color: #409eff;
			cursor: pointer;
		}
	}

	.classifys_list_title {
		display: flex;
		align-items: center;

		i {
			cursor: pointer;
		}
	}

	.classifys_list_box {
		margin-top: 10px;
		display: flex;
		align-items: center;
		gap: 10px;


		div {
			display: flex;
			align-items: center;
		}

		p {
			border: 1px solid #e3e3e3;
			margin-right: 10px;
			padding: 5px 10px;
			border-radius: 10px;
		}
	}

	.filter-upload-time-box {
		div {
			display: flex;
			justify-content: space-between;
			margin: 10px 0;

			span {
				background-color: #f9f3f3;
				border-radius: 6px;
				padding: 10px 20px;
				cursor: pointer;
			}

			span:hover {
				background-color: #f9e9e9;
			}
		}
	}

	:deep(.el-upload-dragger) {
		height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f2f5f9;
	}

	.upload-video-dialog-footer {
		text-align: center;

		.el-button {
			width: 100%;
			background-color: #173eff;
		}
	}

	.upload_video_right_close {
		position: absolute;
		top: 0px;
		right: -34px;
		cursor: pointer;
	}

	.classifys_right_close {
		position: absolute;
		top: 15px;
		right: 15px;
		cursor: pointer;
	}

	.el-select__placeholder,
	.el-select__tags-text {
		display: initial;
	}

	.Upload_video_dialog_inputbox {
		background-color: #f2f5f9;

		:deep(.el-input__wrapper) {
			box-shadow: none;
			background-color: #f2f5f9;
		}

		:deep(.el-textarea__inner) {
			box-shadow: none;
			background-color: #f2f5f9;
		}

		:deep(.el-select__wrapper) {
			box-shadow: none;
			background-color: #f2f5f9;
		}

		:deep(.el-input .el-input__count .el-input__count-inner) {
			background: none;
		}

		:deep(.el-textarea .el-input__count) {
			background: none;
		}
	}

	.Upload_video_dialog_inputbox {
		:deep(.el-select__wrapper:hover) {
			box-shadow: none;
		}
	}

	.Upload_video_dialog_inputbox {
		:deep(.el-input__wrapper:hover) {
			box-shadow: none;
		}
	}

	.Upload_video_dialog_inputbox {
		:deep(.el-input__wrapper.is-focus) {
			box-shadow: none;
		}
	}

	.carousel-container {
		width: 90%;
		height: 80px;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 0 10px;
		box-sizing: border-box;
	}

	/* 箭头样式 */
	.scroll-arrow {
		width: 30px;
		height: 30px;
		background-color: #fff;
		border: none;
		border-radius: 50%;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		cursor: pointer;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		z-index: 10;
	}

	.left-arrow {
		margin-right: 10px;
		/* 左箭头与左侧固定区的间距 */
	}

	.right-arrow {
		margin-left: 10px;
		/* 右箭头与右侧固定区的间距 */
	}

	.arrow-disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}

	/* 固定内容区样式 */
	.fixed-content {
		width: 60px;
		/* 固定内容区宽度 */
		height: 80%;
		padding: 10px 0;
		gap: 6px;
		background-color: #fff;
		border-radius: 6px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
		z-index: 5;
		box-sizing: border-box;
		cursor: pointer;

		p {
			width: 100%;
			text-align: center;
		}
	}

	.left-content {
		margin-right: 15px;
		/* 左侧固定区与轮播内容的间距 */
	}

	.right-content {
		margin-left: 15px;
		/* 右侧固定区与轮播内容的间距 */
	}

	/* 轮播内容样式 */
	.carousel-wrapper {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
	}

	.carousel-items {
		height: 80%;
		width: max-content;
		display: flex;
		transition: transform 0.3s ease-out;
		// padding: 20px 0;
	}

	.carousel-item {
		width: 60px;
		margin-right: 20px;
		box-sizing: border-box;
		cursor: pointer;
	}

	.carousel-card {
		background-color: #fff;
		border-radius: 6px;
		padding: 10px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
		height: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	.item-image {
		width: 100%;
		height: 90px;
		object-fit: cover;
		border-radius: 4px;
		margin-bottom: 8px;
	}

	.item-title {
		font-size: 14px;
		font-weight: 600;
		color: #333;
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>